<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../static/css/prism.css" rel="stylesheet" />
</head>

<body>
    <h2>for ... in 遍历数组</h2>
    <p>不推荐使用 for in 来遍历数组，而应用一般遍历数组的方式遍历数组</p>
    <p><strong>原因：</strong></p>
    <p>for in 会：</p>
    <ol>
        <li>遍历对象的可枚举属性：for...in 语句会遍历对象的所有<strong>可枚举属性</strong>，包括对象自身的属性以及从原型链继承的属性。</li>
        <li>数组的下标索引：当用于数组时，for...in 会遍历数组的索引（即属性名为数值字符串的属性），这些索引在 JavaScript 中也被视为属性。</li>
        <li>非数值属性：如果数组对象上有非数值属性（例如通过直接添加的属性），这些属性也会被 for...in 遍历到。</li>
        <li>继承的属性：如果数组或对象从其原型链上继承了属性，这些属性也会被 for...in 遍历到</li>
    </ol>
    <hr>
    <p>使用：</p>
    <pre><code class="language-javascript">var a = ['sxt', 'baizhan', 'it'];

for (var i in a) {
    console.log(a[i]);
}</code></pre>
    <p style="font-family: Kaiti;">输出：</p>
    <pre><code class="language-makefile">sxt
baizhan
it</code></pre>

    <p>不推荐使用举例：</p>
    <pre><code class="language-javascript">var a = ['sxt', 'baizhan', 'it'];
a.customProperty = 'customValue'; // 添加一个自定义属性

for (var i in a) {
    console.log(i + ': ' + a[i]);
}</code></pre>
    <p style="font-family: Kaiti;">输出：</p>
    <pre><code class="language-makefile">0: sxt
1: baizhan
2: it
customProperty: customValue</code></pre>

    <script src="../static/js/prism.min.js"></script>

    <script>
        console.log("练习开始");
        var a = ['sxt', 'baizhan', 'it'];

        for (var i in a) {
            console.log(a[i]);
        }
    </script>
</body>

</html>